<template>
	<view class="component" v-if="show">
		<view class="b-mask" @click="onClose"></view>
		<view class="b-block pq-center-absolute2">
			<view class="b-title pq-clamp">{{ title }}</view>
			<view class="b-main">
				<scroll-view class="b-scroll" scroll-y="true">
					<rich-text :nodes="formatRich(content)"></rich-text>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'com-tips',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '这是标题'
			},
			content: {
				type: String,
				default: '这是内容'
			}
		},
		data() {
			return {};
		},
		computed: {
			formatRich() {
				return (content) => {
					return content
						.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ')
						.replace(/<section/g, '<div')
						.replace(/\/section>/g, '\div>')
				}

			}
		},
		methods: {
			onClose() {
				this.$emit('bindClose', false);
			}
		}
	};
</script>

<style lang="scss">
	.b-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9998;
		background: rgba($color: #000000, $alpha: 0.6);
	}

	.b-block {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 640upx;
		background: rgba($color: #ffffff, $alpha: 1);
		border-radius: 10upx;
		z-index: 9999;

		.b-close {
			position: absolute;
			top: 10upx;
			right: 20upx;

			.s-icon {
				color: #999999;
				font-size: 36upx;
			}
		}

		.b-title {
			margin-top: 30upx;
			padding: 0 30upx;
			color: #000000;
			font-size: 32upx;
			text-align: center;
		}

		.b-main {
			padding: 30upx;
			color: #333333;
			font-size: 28upx;
			line-height: 40upx;
			min-height: 320upx;
		}

		.b-scroll {
			max-height: 640upx;
		}
	}
</style>
